<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <style>
    #container {
      width: 600px;
      height: 400px;
      position: absolute;
      background: black;
    }
  </style>
  <script src="https://s2.ssl.qhres.com/!87edaa34/animator-0.3.1.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script src="/js/spritejs.js"></script>
  <script>
    const imageFrameData = {"frames": {
    "bird1.png":
    {
      "frame": {"x":2,"y":126,"w":86,"h":60},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":86,"h":60},
      "sourceSize": {"w":86,"h":60}
    },
    "bird2.png":
    {
      "frame": {"x":2,"y":64,"w":86,"h":60},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":86,"h":60},
      "sourceSize": {"w":86,"h":60}
    },
    "bird3.png":
    {
      "frame": {"x":2,"y":2,"w":86,"h":60},
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": {"x":0,"y":0,"w":86,"h":60},
      "sourceSize": {"w":86,"h":60}
    }},
    "meta": {
      "app": "http://www.codeandweb.com/texturepacker ",
      "version": "1.0",
      "image": "birds.png",
      "format": "RGBA8888",
      "size": {"w":128,"h":256},
      "scale": "1",
      "smartupdate": "$TexturePacker:SmartUpdate:1d1900abc513a35465bc91ec5b5cb8cb:13c6a8c39622cb3a3793e80870b1c992:05064d7bb83a0e2b52752dd6e3168bce$"
    }
    }


    ;(async function(){
      const paper = spritejs.Paper2D('#container', 600, 400)

            paper.setResolution(1200, 800)
      
      const Sprite = spritejs.Sprite,
            Label = spritejs.Label
      
      let res = await paper.preload(['https://p.ssl.qhimg.com/d/inn/c886d09f/birds.png', 
                           imageFrameData])
      

      const layer = paper.layer()

      const message = new Label('精灵数量：0')
      message.attr({
        anchor: [1, 0],
        pos: [1150, 20],
        color: '#eee',
        zIndex: 9999,
        font: '28px Arial'
      })

      layer.appendChild(message)

      const birds = new Set()

      function createRandomBird(showTexture = true){
        const bird = new Sprite()
        const rotation = Math.round(180 * Math.random())
        const flip = Math.random() > 0.5 ? 1 : -1

        const duration = Math.round(6000 + 6000 * Math.random())

        bird.attr({
          anchor: [0.5, 0.5],
          pos: [600, 400],
          transform: {
            scale: [flip, 1.0],
            rotate: rotation - 90
          }
        })

        if(showTexture){
          bird.textures = ['bird1.png']
        }else{
          bird.attr({
            bgcolor: 'red',
            opacity: 0.5,
            size: [86, 60]
          })
        }

        birds.add(bird)
        layer.appendChild(bird)

        const a1 = new Animator(duration,  function(p){
          bird.attr('translate', [800 * p, 0])
        })

        a1.animate().then(() => {
          layer.removeChild(bird)
          birds.delete(bird)
          message.text = `精灵数量：${birds.size}`
        })

        message.text = `精灵数量：${birds.size}`

        return bird
      }

      let textureIdx = 0
      setInterval(function(){
        ++textureIdx
        for(const bird of birds){
          if(bird.textures){
            const src = `bird${textureIdx % 3 + 1}.png`
            bird.textures = [src]
          }
        }
      }, 100)

      const button = new Label('点我试试~')
      button.attr({
        pos: [20, 20],
        bgcolor: 'rgba(255,255,255,0.5)',
        borderRadius: 5,
        padding: 6,
        color: '#111',
        font: '28px Arial'
      })

      const button2 = new Label('点我试试~')
      button2.attr({
        pos: [170, 20],
        bgcolor: 'rgba(255,255,255,0.5)',
        borderRadius: 5,
        padding: 6,
        color: '#111',
        font: '28px Arial'
      })

      layer.append(button, button2)

      button.on('mousedown', function(evt){
        evt.target.attr({
          color: '#f99'
        })
        const count = Math.round(20 * Math.random())

        for(let i = 0; i < count; i++){
          createRandomBird()
        }
      })

      button2.on('mousedown', function(evt){
        evt.target.attr({
          color: '#f99'
        })
        const count = Math.round(20 * Math.random())

        for(let i = 0; i < count; i++){
          createRandomBird(false)
        }
      })

      layer.on('mouseup', function(evt){
        button.attr({
          color: '#111'
        })
        button2.attr({
          color: '#111'
        })
      })

      window.layer = layer
      window.message = message
      window.paper = paper
    })()
  </script>
</body>
</html>